<template>
  <div>
    <div class="hot">
      <div class="hotting">
        <div class="hot-left"><img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png"><span> 本周热门榜单</span></div>
        <div class="hot-right">全部榜单 ></div>
      </div>
      <ul class="hot-ul">
        <li v-for="item of list" :key="item.id">
          <img :src="item.img" />
          <p>{{ item.imgtext }}</p>
          <i class="hot-col">{{ item.money }}￥</i><span class="small-text">起</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
'use strict'
// let icon = [
//   { id: 1, img: 'https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg', imgtext: '故宫', money: 40 },
//   { id: 2, img: 'https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg', imgtext: '八达岭长城', money: 35 },
//   { id: 3, img: 'https://imgs.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg', imgtext: '圆明园', money: 25 },
//   { id: 4, img: 'https://imgs.qunarzz.com/sight/p0/201403/07/a3231208ca4095bef77068c202d95bd2.jpg_250x250_6fea594a.jpg', imgtext: '香山公园', money: 12 },
//   { id: 5, img: 'https://imgs.qunarzz.com/sight/p0/1505/d2/d274c92de14c93da.water.jpg_250x250_d852635b.jpg', imgtext: '颐和园', money: 25 },
//   { id: 6, img: 'https://imgs.qunarzz.com/sight/p0/1708/2b/2b6378fd3b2e1d86a3.img.jpg_250x250_b256890e.jpg', imgtext: '北京欢乐谷', money: 137 },
//   { id: 7, img: 'https://imgs.qunarzz.com/sight/p0/1708/2b/2b6378fd3b2e1d86a3.img.jpg_250x250_b256890e.jpg', imgtext: '慕田峪长城', money: 37 },
//   { id: 8, img: 'https://imgs.qunarzz.com/sight/p0/1603/85/85c883189bf7293390.water.jpg_250x250_090a42b6.jpg', imgtext: '什刹海', money: 5 },
//   { id: 9, img: 'https://imgs.qunarzz.com/sight/p0/1602/92/920e47352552c1c990.water.jpg_250x250_ee99c18e.jpg', imgtext: '天坛公园', money: 13.5 },
//   { id: 10, img: 'https://imgs.qunarzz.com/sight/p0/201405/12/51b63883c25f5d87af3c08bb016e2bd7.jpg_250x250_6ec2f798.jpg', imgtext: '恭王府', money: 40 }
// ]
export default {
  name: 'IndeHot',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
.hot
  margin-left 0.2rem
  margin-top 0.2rem
  height 0
  padding-bottom 57.87%
  .hotting
    height 0.94rem
    line-height 0.44rem
    padding 0.26rem 0
    .hot-left
      float left
      font-size .32rem
      >img
        width 0.3rem
      .ic
        color #FF7B46
    .hot-right
      color #616161
      font-size .24rem
      float right
      margin-right 20px
  .hot-ul
    height 3.4rem
    overflow-x scroll
    display flex
    li
      margin-right 10px
      text-align center
      min-width 2rem
      .small-text
        color #616161
        font-size .24rem
      .hot-col
        color #FFD09F
      p
        margin 0.1rem
      img
        width 2rem
        height 2rem
</style>
